<template>
<view class="">
		<swiper-video-image
		    :list="list"
		    autoplay
		    circular
		    autoPlayVideo
		    ref="swiperVideoImage"
		    @swiperClick="swiperClick"
		    @swiperChange="swiperChange"
		></swiper-video-image>
		
		</view>



</template>

<script>
	import lunbo from "./lunbo.vue"
import { toRefs } from "vue";
	export default {
		data() {
			return {
				title: 'Hello',
				lis:[
					{id:0,pic:'https://img0.baidu.com/it/u=1889423232,2254084353&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500'},
						{id:0,pic:'https://img0.baidu.com/it/u=4071803790,3769788713&fm=253&fmt=auto&app=138&f=JPEG?w=334&h=500'},
							// {id:0,pic:'https://img0.baidu.com/it/u=3496194910,739642242&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=800'},
							// 	{id:0,pic:'https://img2.baidu.com/it/u=3872396660,2257107944&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=518'},
				],
				list: [
				    { type: 'video', link: 'https://cdn.uviewui.com/uview/resources/video.mp4' },
				    { type: 'img', link: 'https://cdn.uviewui.com/uview/swiper/swiper1.png' },
				    { type: 'img', link: 'https://cdn.uviewui.com/uview/swiper/swiper2.png' }
				]
			}
		},
		onLoad() {

		},
		methods: {
			swiperChange(index) {
			    // console.log('看',index)
				
			},
			// 点击当前视频或图片的回调
			swiperClick(e, index) {
			    console.log(e, index)
			},
			// 暂停当前视频播放
			pause() {
			    this.$refs.swiperVideoImage.pause()
			},
			// 播放当前视频
			play() {
			    this.$refs.swiperVideoImage.play()
			}

		},
		components:{
			lunbo
		}
	}
</script>

<style>
.flex{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.zuo{
	margin-left: 20rpx;
}
.content{
	padding: 10rpx;
}
/* 头部 */
.head{
	margin: 10rpx 0;
}
.head-img{
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	overflow: hidden;
}
.head-img image{
	width: 100%;
	height: 100%;
}
.text-buttom{
	margin-top: 6rpx;
	font-size: 28rpx;
	color: #333;
}
.head-right{
	color: #ccc;
}
/* 文字 */
.wenzi{
	font-size: 32rpx;
	color: #000;
}
/* 图片 */
.main-img{
	padding: 20rpx;
}
.imgs{
	width: 165rpx;
	height:165rpx;
	
	border-radius: 12rpx;
}
.imgss{
	width: 330rpx;
	height:330rpx;
	
	border-radius: 12rpx;
}
/* 定位 */
.dingwei{
	padding: 20rpx 0;
}
.dingwei-left{
	font-size: 28rpx;
	color: black;
}
.dingwei-right{
	color: yellowgreen;
}
/* 浏览量 */
.Review{
	font-size: 28rpx;
}
.Review-right{
	font-size: 26rpx;
	color: #ccc;
}
/* 按钮 */
.button{
	color: #fff;
	text-align: center;
	width: 80%;
	height: 60rpx;
	line-height: 60rpx;
	background-color: yellowgreen;
	padding: 10rpx;
	border-radius: 12rpx;
	margin: 20rpx auto 0;
}
</style>
